<template>
  <div>
    <h1>人员列表</h1>
    <input type="text" placeholder="请输入姓名" v-model.lazy="name">
    <button @click="add(name)">添加</button>
    <ul>
        <li v-for="(p,index) in personList" :key="index"> {{ p }}</li>
    </ul>
  </div>
</template>

<script>
import {mapState,mapMutations} from 'vuex'

    export default {
        name:'PersonP',
        data() {
            return {
                name:''
            }
        },
        computed:{
            ...mapState('personOptions',['personList'])
        },
        methods: {
            // 纯手写
            add(){
                console.log(this.$store);
                this.$store.commit('personOptions/ADD',this.name)   //personOptions大的分类 /ADD 分类里面的回调函数 ，data==>数据
            },
            // 借助Vuex里面的方法 mapMutations
            ...mapMutations('personOptions',{add:'ADD'})
        },
    }
</script>

<style>

</style>